<!-- src/views/Home.vue -->
<template>
  <div class="home">
    <h1>欢迎来到 Vue 示例首页</h1>
    <ul class="link-list">
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      routes: [
        { path: '/demo1', name: '三栏布局' },
        { path: '/demo2', name: '水平居中的导航菜单' },
        { path: '/demo3', name: '修改背景' },
        { path: '/demo4', name: '接口请求' },
        { path: '/demo5', name: '去重函数' },
        { path: '/demo6', name: '星期数字转换' },
        { path: '/demo7', name: 'TODO应用' },
      ],
    };
  },
};
</script>

<style scoped>
.home {
  padding: 20px;
}

.link-list {
  list-style: none;
  padding-left: 0;
}

.link-list li {
  margin-bottom: 10px;
}

.link-list a {
  text-decoration: none;
  color: #1890ff;
  font-size: 16px;
}

.link-list a:hover {
  text-decoration: underline;
}
</style>